<!doctype html>
<!--
  Copyright 2010 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  This page shows the media plus all the metadata we were able to find
  regarding the media.
-->

<html>
  <head>
    <title>Media+Attribution</title>
    <link rel="stylesheet" href="metadata.css" type="text/css"></style>
    <script src='jquery-2.0.2.min.js'></script>
    <script src='metadata.js'></script>
  </head>
  <body>
  <fieldset>
    <legend>Attribution Information</legend>
    <div class="notarow">
    <label for="page_url">Page URL:</label>
    <span id="page_url"></span>
    </div>

    <div class="notarow">
    <label for="page_short_url">Page short url:</label>
    <input type="button" class="button" id="page_short_url_but"
      value="get goog.gl URL" onclick="googlShorten('page_url', this.id, 'page_short_url');"/>
    <span id="page_short_url"></span><br>
    </div>

    <div class="notarow">
    <label for="media_url">Media URL:</label>
    <span id="media_url"></span><br>
    </div>

    <div class="notarow">
    <label for="media_short_url">Media short url:</label>
    <input type="button" class="button" id="media_short_url_but"
      value="get goog.gl URL" onclick="googlShorten('media_url', this.id, 'media_short_url');"/>
    <span id="media_short_url"></span><br>
    </div>

    <div class="notarow">
    <label for="fname">File name:</label>
    <input id="fname" onblur="onChange();" class="short-text" type="text" name="fname" size="40"/><br>
    </div>

    <div class="notarow">
    <label for="desc">Desc:</label>
    <input id="desc" onblur="onChange();" class="long-text" type="text" name="desc"/><br>
    </div>

    <div class="notarow">
    <label for="media_type">Media type:</label>
    <span id="media_type"></span><br/>
    </div>

    <div class="notarow">
    <label for="date">Date:</label>
    <span id="date"></span><br>
    </div>

    <div class="notarow">
    <label for="author">Author:</label>
    <input id="author" onblur="onChange();" class="short-text" type="text" name="author" size="40"/><br>
    </div>

    <div class="notarow">
    <label for="author_urls">Author URL(s):</label>
    <input id="author_urls" onblur="onChange();" class="short-text" type="text" name="author_urls" size="40"/><br>
    </div>

    <div class="notarow">
    <label for="license">License(s):</label>
    <input id="license" onblur="onChange();" class="license-text" type="text" name="license"/><br>
    </div>

    <div class="notarow">
    <label></label>
    <div id="license-icons"></div>
    </div>
  </fieldset>

  <p class="info"><b>Right</b> click on the two links below (in order) and then click "Save Link
  As..." for each.  You should save both files to the same folder.</p>

  <p class="info">If you also have the python program watch.py monitoring the folder it will do the
  right thing by renameing the files to what you typed in "<code>File name:</code>" above.
  <a href="help.html">Tell me more...</a></p>

  <a id="save_media_as" class="savelinkas" href="#">Save Media Link As...</a>

  <a id="save_meta_as" class="savelinkas" href="#">Save Metadata Text Link As...</a>

  <img class="image" id="theimage">

  </body>
</html>
